<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>高德地图导航 - 济南到北京</title>
    <style>
      body,
      html {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map-container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>

    <script>
      window.init = function () {
        // 创建地图实例
        const map = new AMap.Map('map-container', {
          zoom: 8,
          viewMode: '3D',
        })

        // 起点 - 济南
        const startPoint = [117.121225, 36.651216]
        // 终点 - 北京
        const endPoint = [116.397428, 39.90923]

        // 添加起点和终点标记
        const startMarker = new AMap.Marker({
          position: startPoint,
          title: '济南',
          map: map,
        })

        const endMarker = new AMap.Marker({
          position: endPoint,
          title: '北京',
          map: map,
        })

        // 使用驾车规划
        AMap.plugin('AMap.Driving', function () {
          const driving = new AMap.Driving({
            map: map,
            panel: false,
          })

          // 规划路线
          driving.search(startPoint, endPoint, function (status, result) {
            if (status === 'complete') {
              console.log('规划完成', result)
              // 调整地图视野以包含起点和终点
              map.setFitView()
            } else {
              console.error('获取驾车规划失败：', result)
            }
          })
        })
      }
    </script>

    <!-- 使用MCP服务加载高德地图 -->
    <script src="http://localhost:8888/index.js"></script>
  </body>
</html>
